/**
 * 根据字符串生成哈希值
 */
function hashString(str: string): number {
  let hash = 0
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash)
  }
  return Math.abs(hash)
}

/**
 * 根据用户ID生成头像颜色
 * @param userId 用户ID或用户名
 * @returns 颜色字符串（十六进制）
 */
export const getAvatarColor = (userId: string | null | undefined): string => {
  if (!userId) {
    return '#C9C9C9' // 默认灰色
  }
  
  // 扩展的颜色列表（更多选择，更丰富的色彩）
  const colors = [
    '#FF6B6B', // 红色
    '#4ECDC4', // 青色
    '#45B7D1', // 蓝色
    '#FFA07A', // 浅橙色
    '#98D8C8', // 薄荷绿
    '#F7DC6F', // 黄色
    '#BB8FCE', // 紫色
    '#85C1E2', // 天蓝色
    '#F8B739', // 橙色
    '#52B788', // 绿色
    '#E17055', // 珊瑚色
    '#74B9FF', // 亮蓝色
    '#A29BFE', // 淡紫色
    '#FD79A8', // 粉色
    '#00B894', // 青绿色
    '#6C5CE7', // 深紫色
    '#FF7675', // 粉红色
    '#55EFC4', // 青绿色
    '#81ECEC', // 浅青色
    '#A29BFE', // 淡紫色
    '#FD79A8', // 粉红色
    '#FDCB6E', // 金黄色
    '#E17055', // 橙红色
    '#DDA15E', // 土黄色
    '#BC6C25', // 棕色
    '#606C38', // 橄榄绿
    '#283618', // 深绿色
  ]
  
  const hash = hashString(userId)
  const index = hash % colors.length
  return colors[index]
}

/**
 * 根据用户ID生成渐变颜色对
 * @param userId 用户ID或用户名
 * @returns 包含主色和辅色的对象
 */
export const getAvatarGradient = (userId: string | null | undefined): { primary: string; secondary: string } => {
  if (!userId) {
    return { primary: '#C9C9C9', secondary: '#A0A0A0' }
  }
  
  const primary = getAvatarColor(userId)
  
  // 生成一个稍微不同的颜色作为辅色（通过修改哈希值）
  const hash = hashString(userId + '_secondary')
  const colors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
    '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788',
    '#E17055', '#74B9FF', '#A29BFE', '#FD79A8', '#00B894',
    '#6C5CE7', '#FF7675', '#55EFC4', '#81ECEC', '#FDCB6E',
  ]
  const secondary = colors[hash % colors.length]
  
  return { primary, secondary }
}

/**
 * 根据用户ID生成头像样式类型（用于不同的图案）
 * @param userId 用户ID或用户名
 * @returns 样式类型索引 (0-7)
 */
export const getAvatarPatternType = (userId: string | null | undefined): number => {
  if (!userId) return 0
  const hash = hashString(userId + '_pattern')
  return hash % 8 // 8种不同的图案样式
}

/**
 * 根据用户ID生成头像背景样式
 * @param userId 用户ID或用户名
 * @returns 样式对象
 */
export const getAvatarStyle = (userId: string | null | undefined): { background: string; color: string } => {
  const color = getAvatarColor(userId)
  return {
    background: color,
    color: '#FFFFFF'
  }
}

/**
 * 获取用户名的首字母（用于默认头像显示）
 * @param name 用户名
 * @returns 首字母（大写）
 */
export const getInitial = (name: string | null | undefined): string => {
  if (!name || name.trim() === '') {
    return 'U'
  }
  // 获取第一个字符，如果是中文则直接返回，如果是英文则转大写
  const firstChar = name.trim()[0]
  if (/[\u4e00-\u9fa5]/.test(firstChar)) {
    return firstChar
  }
  return firstChar.toUpperCase()
}

/**
 * 生成默认头像的SVG data URI（圆形，带丰富样式）
 * @param userId 用户ID或用户名（用于生成颜色）
 * @param name 用户昵称（用于显示首字母）
 * @param size 头像尺寸（默认100）
 * @returns SVG data URI
 */
export const generateDefaultAvatar = (
  userId: string | null | undefined,
  name: string | null | undefined,
  size: number = 100
): string => {
  const gradient = getAvatarGradient(userId)
  const patternType = getAvatarPatternType(userId)
  const initial = getInitial(name || userId)
  const radius = size / 2
  
  // 生成不同的图案样式
  let patternElements = ''
  const patternSize = size * 0.15
  
  // 使用纯色背景，不使用渐变
  const primaryColor = gradient.primary
  
  switch (patternType) {
    case 0: // 纯色背景
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>`
      break
    case 1: // 左上角装饰圆
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <circle cx="${radius * 0.3}" cy="${radius * 0.3}" r="${patternSize}" fill="${gradient.secondary}" opacity="0.6"/>`
      break
    case 2: // 右下角装饰圆
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <circle cx="${radius * 1.7}" cy="${radius * 1.7}" r="${patternSize}" fill="${gradient.secondary}" opacity="0.6"/>`
      break
    case 3: // 对角线装饰
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <line x1="${radius * 0.2}" y1="${radius * 0.2}" x2="${radius * 1.8}" y2="${radius * 1.8}" stroke="${gradient.secondary}" stroke-width="${size * 0.08}" opacity="0.4"/>`
      break
    case 4: // 中心小圆
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <circle cx="${radius}" cy="${radius}" r="${patternSize}" fill="${gradient.secondary}" opacity="0.5"/>`
      break
    case 5: // 四角装饰
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <circle cx="${radius * 0.25}" cy="${radius * 0.25}" r="${patternSize * 0.6}" fill="${gradient.secondary}" opacity="0.5"/>
      <circle cx="${radius * 1.75}" cy="${radius * 0.25}" r="${patternSize * 0.6}" fill="${gradient.secondary}" opacity="0.5"/>
      <circle cx="${radius * 0.25}" cy="${radius * 1.75}" r="${patternSize * 0.6}" fill="${gradient.secondary}" opacity="0.5"/>
      <circle cx="${radius * 1.75}" cy="${radius * 1.75}" r="${patternSize * 0.6}" fill="${gradient.secondary}" opacity="0.5"/>`
      break
    case 6: // 波浪装饰
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <path d="M 0 ${radius} Q ${radius * 0.5} ${radius * 0.3} ${radius} ${radius} T ${size} ${radius}" 
            stroke="${gradient.secondary}" stroke-width="${size * 0.06}" fill="none" opacity="0.3"/>`
      break
    case 7: // 星形装饰
      patternElements = `<circle cx="${radius}" cy="${radius}" r="${radius}" fill="${primaryColor}"/>
      <polygon points="${radius},${radius * 0.3} ${radius * 0.9},${radius * 0.7} ${radius * 0.3},${radius * 0.7} ${radius * 0.7},${radius * 1.1} ${radius * 0.5},${radius * 1.5} ${radius},${radius * 1.2} ${radius * 1.5},${radius * 1.5} ${radius * 1.3},${radius * 1.1} ${radius * 1.7},${radius * 0.7} ${radius * 1.1},${radius * 0.7}" 
               fill="${gradient.secondary}" opacity="0.4"/>`
      break
  }
  
  const svg = `
    <svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
      ${patternElements}
      <text 
        x="50%" 
        y="50%" 
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif"
        font-size="${size * 0.4}" 
        font-weight="600"
        fill="#FFFFFF" 
        text-anchor="middle" 
        dominant-baseline="central"
        letter-spacing="0"
        style="text-shadow: 0 1px 2px rgba(0,0,0,0.2);"
      >${initial}</text>
    </svg>
  `.trim()
  
  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`
}

/**
 * 生成方形默认头像的SVG data URI（带丰富样式）
 * @param userId 用户ID或用户名（用于生成颜色）
 * @param name 用户昵称（用于显示首字母）
 * @param size 头像尺寸（默认50）
 * @param borderRadius 圆角半径（默认4）
 * @returns SVG data URI
 */
export const generateSquareDefaultAvatar = (
  userId: string | null | undefined,
  name: string | null | undefined,
  size: number = 50,
  borderRadius: number = 4
): string => {
  const gradient = getAvatarGradient(userId)
  const patternType = getAvatarPatternType(userId)
  const initial = getInitial(name || userId)
  
  // 生成不同的图案样式（简化版，适合小尺寸）
  let patternElements = ''
  const patternSize = size * 0.15
  
  // 使用纯色背景，不使用渐变
  const primaryColor = gradient.primary
  
  switch (patternType % 4) { // 方形头像使用4种简化样式
    case 0: // 纯色背景
      patternElements = `<rect width="${size}" height="${size}" fill="${primaryColor}" rx="${borderRadius}"/>`
      break
    case 1: // 单色背景 + 装饰圆
      patternElements = `<rect width="${size}" height="${size}" fill="${primaryColor}" rx="${borderRadius}"/>
      <circle cx="${size * 0.8}" cy="${size * 0.2}" r="${patternSize}" fill="${gradient.secondary}" opacity="0.5"/>`
      break
    case 2: // 单色背景 + 对角线
      patternElements = `<rect width="${size}" height="${size}" fill="${primaryColor}" rx="${borderRadius}"/>
      <line x1="0" y1="0" x2="${size}" y2="${size}" stroke="${gradient.secondary}" stroke-width="${size * 0.1}" opacity="0.3"/>`
      break
    case 3: // 单色背景 + 中心圆
      patternElements = `<rect width="${size}" height="${size}" fill="${primaryColor}" rx="${borderRadius}"/>
      <circle cx="${size / 2}" cy="${size / 2}" r="${patternSize}" fill="${gradient.secondary}" opacity="0.4"/>`
      break
  }
  
  const svg = `
    <svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
      ${patternElements}
      <text 
        x="50%" 
        y="50%" 
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif"
        font-size="${size * 0.4}" 
        font-weight="500"
        fill="#FFFFFF" 
        text-anchor="middle" 
        dominant-baseline="central"
        letter-spacing="0"
        style="text-shadow: 0 1px 2px rgba(0,0,0,0.2);"
      >${initial}</text>
    </svg>
  `.trim()
  
  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`
}

